﻿<!DOCTYPE html>
<html>
<head>
<title>移动设备在线订购实例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--引用jQuery Mobile函数库  应用ThemeRoller制作的样式-->
<link rel="stylesheet" href="jquery.mobile-1.3.2.min.css">
<link rel="stylesheet" href="mytheme.css">
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.mobile-1.3.2.min.js"></script>

<!--优化屏幕宽度-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">


</style>
<script type="text/javascript"> 
 var orderitem = "orderitem";
 var flavor = "itemflavor";
 var num = "num";

				 
         $("#second").live('pagecreate', function() {
             $('#addToStorage').click(function() {
				 localStorage.sweet=$('input[name="sweetitem"]:checked').val();
             	 localStorage.orderitem=$("select#selectitem").val();
				 localStorage.flavor=$('input[name="flavoritem"]:checked').val();
				 localStorage.num=$('#num').val();	 
				 $.mobile.changePage($('#third'),{transition: 'slide'});   
             });
         });
		
          $('#third').live('pageinit', function() {			 
				 var itemflavor = "甜点编号:"+localStorage.sweet+"<br>甜点种类："+ localStorage.orderitem+"<br>口味："+localStorage.flavor+"<br>数量："+localStorage.num;
				 $('#message').html(itemflavor);
				 //document.getElementById("message").innerHTML= itemflavor
		  });

</script> 
</head>
<body>
<!--********************page.2***********************-->
<div data-role="page" data-title="选择甜点" id="second" data-theme="a" data-add-back-btn="true" >
<div data-role="header">
<h1>选择甜点</h1>
</div>

<div data-role="content" id="content">
	<legend>甜品类型：</legend>
	<fieldset data-role="controlgroup" data-type="horizontal">
		<input type="radio" name="sweetitem" id="radio-sweet-1" value="1001" checked />
		<label for="radio-sweet-1">巧克力</label>
		<input type="radio" name="sweetitem" id="radio-sweet-2" value="1002"  />
		<label for="radio-sweet-2">饼干</label>
		<input type="radio" name="sweetitem" id="radio-sweet-3" value="1003"  />
		<label for="radio-sweet-3">蛋糕</label>
		<input type="radio" name="sweetitem" id="radio-sweet-4" value="1004"  />
		<label for="radio-sweet-4">面包</label>
	</fieldset>
	<legend>包装类型：</legend>
	<select name="selectitem" id="selectitem">
	   <option value="粉红包装盒" selected>粉红包装盒</option>
	   <option value="一般盒装">一般盒装</option>
	   <option value="铁盒精致包装">铁盒精致包装</option>
	</select>

<fieldset data-role="controlgroup">
		<legend>选择口味：</legend>
			<input type="radio" name="flavoritem" id="radio-choice-1" value="核桃" checked />
			<label for="radio-choice-1">核桃</label>
			<input type="radio" name="flavoritem" id="radio-choice-2" value="夏威夷豆"  />
			<label for="radio-choice-2">夏威夷豆</label>
			<input type="radio" name="flavoritem" id="radio-choice-3" value="花生"  />
			<label for="radio-choice-3">花生</label>

</fieldset>
	<legend>订购数量：</legend>
	<input type="range" name="num" id="num" value="1" min="0" max="100" data-highlight="true" />
   <!-- <input type="button" id="addToStorage" value="送出订购" /> -->
   <a data-role="button" data-rel="popup" id="regist" href="#showdialog">送出订购</a>
   <div data-role="popup" id="showdialog">
        <div data-role="header">
            <h1>消息框</h1>
        </div>
        <div data-role="content">
            <h2>提交成功</h2>
            <a href="#" data-role="button" data-rel="back">确认</a>
        </div>
    </div>

</div>
<div data-role="footer" data-position="fixed" style="text-align:center">
   订购专线：90917777
</div>
</div>
<!--********************page.2 end***********************-->

<!--********************page.3***********************-->
<!-- <div data-role="page" id="third">
<div data-role="header">
<a href="index.htm" data-icon="arrow-l" data-iconpos="left" data-ajax="false">返回</a> <h1>订购完成</h1>
</div>
<div data-role="content" id="content">
<img src="images/present.png" /><br>
<font style="font-size:20px;">感谢您向甜点坊订购甜点<br>
以下为您的订购列表：</font>
<p><div id="message" style="font-size:25px;color:#ff0000"></div>
</div>
<div data-role="footer" data-position="fixed" style="text-align:center">
   订购专线：90917777
</div>
</div> -->
<!--********************page.3 end***********************-->
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js""></script>
	  <script type="text/javascript">
	    $('#regist').click(function() {
	         $.ajax({
	            method: "POST",
	            url: "http://10.1.66.36:8081/smis/orders/add",
	            contentType: "application/json;charset=utf-8",
	            data:JSON.stringify({"sweetitem":$('input:radio:checked').val(),"selectitem":$('option:selected').val(),"flavoritem":$('input:radio:checked').val(),"num":$('input:range').val()}),
	            dataType: "json",
	            success:function (data) {
	               console.log(data.msg);
	            },
	            error:function (message) {
	                console.log('123');
	            }
	        });
	    })
	    // $(document).ready(function () {
	       
	    //  });
	  </script>

</body>
</html>
